<template>
    <div>
        <el-main>
            <!--  查询条件 -->
            <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.operName" placeholder="请输入用户名"></el-input>
                </el-form-item>


                <el-form-item>
                    <div class="block">
                        <span class="demonstration">请求时间</span>
                        <el-date-picker v-model="pickTime" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <el-form-item label="快速查询">

                    <el-radio-group v-model="searchForm.status">
                        <el-radio :label="-1">全部</el-radio>
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">失败</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>

            <el-form :model="form" size="small">

                <el-form-item>
                    <el-button type="primary" plain @click="search">查询</el-button>
                    <el-button type="danger" plain @click="reset">重置</el-button>
                </el-form-item>
            </el-form>


            <!--  表格展示 -->
            <!--  表格 -->

            <el-table v-loading="loading" :data="tableData" height="" style="width: 100%">
                <el-table-column prop="operName" label="用户" align="center">
                </el-table-column>

                <el-table-column prop="title" label="操作内容" align="center">
                </el-table-column>
                <el-table-column prop="operUrl" label="请求路径" align="center">
                </el-table-column>
                <!-- 1 -->
                <el-table-column prop="operIp" label="请求ip" align="center">
                </el-table-column>
                <el-table-column label="请求结果" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status==1">
                            正常
                        </el-tag>
                        <el-tag type="danger" v-if="scope.row.status==0">
                            失败
                        </el-tag>
                        <!-- 请求结果，  0 为正常，1 为失败  -->
                        <!-- <span v-if="" scope.row.status==0>
                            <el-tag type="success">正常</el-tag>
                        </span>
                        <span v-if="scope.row.status==1">
                            <el-tag > 失败 </el-tag>
                        </span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="userAgent" label="客户端" align="center">
                </el-table-column>
                <el-table-column prop="businessType" label="业务类型" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="时间" align="center">
                </el-table-column>
                <!--  准备删除 -->



                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span style="cursor: pointer; color: #1890ff" class="oper" @click="checkDetail(scope.row)">详情
                        </span>
                        <!-- <span style="color: #1890ff" class="oper"> 下载</span> -->
                        <!-- <span style="color: #1890ff" class="oper" @click="handleDelete(scope.row.fileKey)">
                            删除</span> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <el-form :model="form">
            <el-form-item label=""></el-form-item>
        </el-form>

        <!--  详情对话框 -->
        <system-dialog :title="operLogDiaLog.title" :visible="operLogDiaLog.visible" :width="operLogDiaLog.width"
            :height="operLogDiaLog.height" @onClose="onClose" @onConfirm="onConfirm()">
            <div slot="content" style="position: relative;padding: 20px 20px;">
                <!--  第一行 -->
                <div style="">
                    <span>
                        请求地址:
                        <span style="color: #23A9F2;"> {{dialogModel.operUrl}}</span>
                    </span>
                    <span> 请求日期:
                        <span style="color: #E82F27;">
                            {{dialogModel.createTime}}
                        </span>
                    </span>
                </div>
                <br>
                <br>
                <br>
                <!-- 第二行 -->
                <div>
                    <div>请求方法: </div>
                    <div>

                        <span style="color: #E61EFF;">

                            {{dialogModel.method}}
                        </span>
                    </div>
                </div>
                <br>
                <br>
                <br>

                <!-- 第三行 -->
                <div>
                    <!-- ER进销存-商品管理-分页查询 -->
                    <span> 请求内容:
                        <span style="color: #00C4BF;">

                            {{dialogModel.title}}
                        </span>
                    </span>
                </div>
                <!--  第四行 -->
                <br>
                <br>

                <div>
                    <div>请求参数</div>
                    <div>
                        <!-- <json-viewer :value="jsonData" :expand-depth=5 copyable boxed sort></json-viewer> -->
                        <!-- //data可以是请求后端返回的数据 -->
                        <vue-json-pretty :path="'res'" :data="jsonData"> </vue-json-pretty>
                    </div>
                </div>
                <div style="position: absolute; ; right: 0; top: -50">
                    请求状态
                    <div style="color: #52C41A; font-size: 30px; font-weight: 900;">
                        <span v-if="dialogModel.status==1">
                            成功
                        </span>
                        <span v-if="dialogModel.status==0" style="color: #FF380F;">
                            失败
                        </span>
                    </div>
                </div>

            </div>

        </system-dialog>
        <!-- 分页工具栏 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

    </div>
</template>

<script>
    import SystemDialog from "@/components/system/SystemDialog";

    import VueJsonPretty from 'vue-json-pretty';
    import 'vue-json-pretty/lib/styles.css';
    // 结构导入
    import { operlogApi } from "@/api/operlog"
    export default {
        components: {
            SystemDialog,
            VueJsonPretty
        },
        data() {
            return {
                loading: true,
                jsonData: [], // json格式数据

                pickTime: [], // 选择的时间范围
                operLogDiaLog: {
                    title: "",
                    visible: false,
                    width: 760,
                    height: 390
                },
                total: 10,
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    status: -1,
                    beginTime: "", // 开始时间
                    endTime: "", // 结束时间
                    operName: ""  // 操作人

                },
                dialogModel: {
                    createTime: "",
                    requestMethod: "",
                    title: "",  // 请求内容
                    method: "", // 请求方法
                    operUrl: "",// 请求地址
                    operParam: "",  // 
                    stauts: 1, // 请求状态

                },
                tableData: []    // 表格数据展示
            }
        }
        ,
        created() {
            this.search()

        },
        methods: {

            reset() {

                // 清空表单
                this.searchForm = {
                    pageNum: 1,
                    pageSize: 10,
                    operName: "",
                    beginTime: "",
                    endTime: "",
                    // 默认查询全部
                    status: -1
                }
                this.pickTime = []
                this.search()
            },
            handleCurrentChange(page) {
                this.searchForm.pageNum = page
                this.search()
            },
            handleSizeChange(size) {
                this.searchForm.pageSize = size
                this.search()


            },
            onClose() {
                this.operLogDiaLog.visible = false
                this.operLogDiaLog.visible = false

            },
            onConfirm() {
                this.operLogDiaLog.visible = false
            },
            // 查看操作日志详情信息
            checkDetail(row) {
                this.operLogDiaLog.title = '请求详情'
                this.operLogDiaLog.visible = true
                this.dialogModel.createTime = row.createTime
                this.dialogModel.requestMethod = row.requestMethod
                //  请求内容
                this.dialogModel.title = row.title
                //  请求地址
                this.dialogModel.operUrl = row.operUrl

                this.dialogModel.method = row.method

                this.dialogModel.operParam = row.operParam

                console.log(row)
                this.dialogModel.status = row.status

                // this.jsonData.data = row.operParam
                // json 数据美化
                this.jsonData.push(
                    JSON.parse(
                        row.operParam

                    )
                )

                //  打开对话框
                // 回显数据

            },
            async search() {
                this.searchForm.beginTime = this.pickTime[0]
                this.searchForm.endTime = this.pickTime[1]
                try {
                    let res = await operlogApi.getOperLogPage(this.searchForm)
                    this.tableData = res.data.records
                    this.total = res.data.total
                } catch (e) {

                } finally {
                    this.loading = false
                }

            }
        }

    }

</script>
<style scoped>
    /deep/ .has-gutter th {
        background-color: #F2F6FC;
    }
</style>